<template>
  <div id="dymamicTable">
    <vxe-table
      ref="xTable"
      v-loading="tableLoading"
      class="xTable"
      :data="tableData"
      border
      resizable
      keep-source
      highlight-hover-row
      :checkbox-config="{ highlight: true}"
      :scroll-y="{enabled: false}"
      :cell-style="cellStyle"
      :span-method="mergeRowMethod"
      :header-cell-style="headerCellStyle"
      :footer-cell-class-name="footerCellClassName"
    >
      <!--   show-footer
      :footer-method="footerMethod" -->
      <!--模版  -->
      <template v-for="item in tableHeader">
        <!-- 有多级表头 -->
        <!-- Math.random 用于解决表格之间相互切换所产生的一系列问题 -->
        <table-column
          v-if="item.children && item.children.length>0"
          :key="item.id+''"
          :coloumn-header="item"
          show-overflow-tooltip
          @aaa="aaa"
        />
        <!-- 一级表头 -->
        <template v-else>
          <vxe-table-column
            :key="item.id+Math.random()+''"
            :field="item.value"
            :title="item.label"
            :fixed="item.fixed"
            :width="'177px'"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <el-link type="primary" @click="()=>aaa(scope.row[item.value])">{{ scope.row[item.value] }}</el-link>
            </template>
          </vxe-table-column>
        </template>
      </template>
      <!-- <vxe-table-column fixed="right" :min-width="120" title="操作" field="do">
        <template slot-scope="scope">
          <span v-if="scope.row.TYPE!=='合计' && scope.row.SUBJECT!=='小计' " style="color:blue;text-decoration:underline;cursor:pointer" @click="editTable(scope.row)">
            修改计算依据
          </span>
        </template>
      </vxe-table-column> -->

      <template #empty>
        <span style="color: red;">
          <img style="height:150px" src="@/assets/images/monthReport/noReport.png">
          <div>暂无报表数据</div>
        </span>
      </template>
    </vxe-table>
  </div>
</template>
<script>
import tableColumn from './TableColumn.vue';
import commonVariable from '@/utils/commonVariable';
import XEUtils from 'xe-utils';
export default {
  components: {
    tableColumn
  },
  props: {
    // 表格的数据
    tableData: {
      type: Array,
      required: true
    },
    // 多级表头的数据
    tableHeader: {
      type: Array,
      required: true
    },
    // 加载
    tableLoading: {
      type: Boolean,
      default: () => {
        return false;
      }
    }

  },
  data() {
    return {
      baseWidthVariable: commonVariable.baseWidthVariable
    };
  },
  methods: {

    aaa(row) {
      this.$emit('openDialog', row);
    },
    // 通用行合并函数（将相同多列数据合并为一行）
    mergeRowMethod({ row, _rowIndex, column, visibleData }) {
      const fields = ['PRIOR_TYPE', 'TYPE'];
      const cellValue = row[column.property];
      if (cellValue && fields.includes(column.property)) {
        const prevRow = visibleData[_rowIndex - 1];
        let nextRow = visibleData[_rowIndex + 1];
        if (prevRow && prevRow[column.property] === cellValue) {
          return { rowspan: 0, colspan: 0 };
        } else {
          let countRowspan = 1;
          while (nextRow && nextRow[column.property] === cellValue) {
            nextRow = visibleData[++countRowspan + _rowIndex];
          }
          if (countRowspan > 1) {
            return { rowspan: countRowspan, colspan: 1 };
          }
        }
      }
    },
    headerCellStyle({ column, columnIndex }) {
      if (column.property === 'do') {
        return {
          textAlign: 'center',
          backgroundColor: 'rgb(64, 158, 255)',
          color: '#fff',
          borderBottom: '1px solid #fff'
        };
      } else {
        return {
          textAlign: 'center',
          backgroundColor: '#f7f8fa',
          color: '#333333',
          borderBottom: '1px solid #fff'
        };
      }
    },
    footerCellClassName({ $rowIndex, columnIndex }) {
      return {
        textAlign: 'center'
      };
    },
    cellStyle({ row, rowIndex, column }) {
      if (row.TYPE === '合计') {
        if (column.property !== 'PRIOR_TYPE') {
          return {
            backgroundColor: 'rgb(163, 210, 254)',
            textAlign: 'center'
          };
        }
      }

      if (row.SUBJECT === '小计') {
        if (column.property !== 'PRIOR_TYPE' && column.property !== 'TYPE') {
          return {
            backgroundColor: 'rgb(209, 234, 255)',
            textAlign: 'center'
          };
        }
      }
      return {
        textAlign: 'center'
      };
    },

    footerMethod({ columns, data }) {
      const footerData = [
        columns.map((column, columnIndex) => {
          if (columnIndex === 0) {
            return '合计';
          } else {
            if (columnIndex < 3 || column.property === 'do' || column.property === 'CALC_BASIS') {
              return '--';
            } else {
              const filterData = data.filter(item => item.TYPE === '合计');
              return XEUtils.sum(filterData, column.property);
            }
          }
        })
      ];
      return footerData;
    }
  }
};
</script>
<style scoped lang='scss'>
.spanHover:hover {
  text-decoration: underline;
  cursor: pointer;
}

.dymamicTable_canedit {
  display: grid;
  grid-template-columns: 14px auto;
}
.dymamicTable_canedit__icon {
  opacity: 0;
  margin-right: 10px;
}
.dymamicTable_canedit__icon_show {
  opacity: 1;
}
>>> * {
  .col--dirty {
    color: red;
    &::before {
      display: none;
    }
  }
}

</style>
